<template>
  <div v-if="item.img">
    <img :src="`${filePath}${item.img}`" alt=""/>
  </div>
  <table class="table">
    <tr v-for="it in child.currentItem">
      <td>
        <strong>{{ it.item_f_name }}</strong>
      </td>
      <td>
        <span>{{ it.item_f_value }}</span>
      </td>
    </tr>

  </table>
  <h4 v-if="item.say">{{ item.say }}</h4>

</template>
<script setup lang="ts">
import {reactive, watch} from "vue";
import {filePath, post} from "@/common";

const props = defineProps({
  item:{
    default:()=>({} as any)
  }
})

const child = (()=>{

  interface ICurrentItem{
    item_f_name:string,
    item_f_value:string
  }
  const getDataSource = async () => {
    s.currentItem = await post("v1/modDetail/get",{item_id:props.item.id})
  }

  const s = reactive({
    currentItem:<ICurrentItem[]>[]
  })
  getDataSource()
  watch(() => props.item, getDataSource, {deep:true})

  return s
})()
</script>
<style scoped lang="less">
.table {
  border-collapse: collapse;
  margin-top: 0.5em;
}
td {
  padding: 0.5em;
  border: solid 1px #e7d;
}
.introduce-grid {
  display: inline-grid;
  justify-content: center;
  place-items: center;
  padding: 5px;
  border: 1px solid;
}
*{
  font-family: ysbth,serif;
}
</style>